<template>
  <div id="report--preview">
    <template v-if="!hascusTom">
      <div class="report--header">
        <div class="report--header--item1">
          <span class="report--header--sub"
            >姓名:{{ info.name ? info.name : "--" }}</span
          >
        </div>
        <div class="report--header--item1">
          <span class="report--header--sub"
            >性别:{{ info.sex === 1 ? "男" : "女" }}</span
          >
        </div>
        <div class="report--header--item1">
          <span class="report--header--sub">年龄:{{ info.year }}</span>
        </div>
        <div class="report--header--item1">
          <span class="report--header--sub"
            >检查部位:{{ info.pos ? info.pos : "--" }}</span
          >
        </div>
        <div class="report--header--item1">
          <span class="report--header--sub"
            >检查时间:{{ momenthandle(info.createdAt) }}</span
          >
        </div>
      </div>
      <div class="report--img">
        <template v-if="info.images">
          <div
            class="preview--img-box"
            v-for="(item, index) in info.images"
            :key="index.id"
          >
            <img :src="item.image" alt="" class="preview--img" />
          </div>
        </template>
      </div>
      <div class="report--word">
        <h2 class="report--title1">临床申请检查内容:</h2>
        <p class="report--pos">
          {{ info.pos ? info.pos : "--" }}
        </p>
        <h3 class="report--title2">超声所见:</h3>
        <p class="report--con">
          {{ info.seen ? info.seen : "--" }}
        </p>
        <h3 class="report--title2">超声提示:</h3>
        <p class="report--con">
          {{ info.tips ? info.tips : "--" }}
        </p>
      </div>
      <div class="report--footer">
        <span class="footer--sub--tips"
          >此报告为辅助诊断,仅供临床诊断参考.</span
        >
        <span class="footer--sub">检查医生:</span>
        <div class="sign--box">
          <img :src="info.doc_sign" alt="" v-if="info.doc_sign" />
        </div>
        <span class="footer--sub">送检医生:</span>
        <div class="sign--box">
          <img :src="info.pat_sign" alt="" v-if="info.pat_sign" />
        </div>
      </div>
    </template>
  </div>
</template>

<script>
import moment from "moment";
export default {
  name: "Report",

  props: {
    info: {
      type: Object,
    },
    status: {
      type: Boolean,
    },
  },

  data() {
    return {
      hascusTom: false,
    };
  },
  watch: {
    status: {
      immediate: true,
      handler(newVal) {
        console.log(
          "%c [ newVal ]-108",
          "font-size:13px; background:pink; color:#bf2c9f;",
          newVal
        );
        const vm = this;
        if (newVal) {
          this.$nextTick(() => {
            vm.init();
          });
        } else {
          this.clearCusTom();
        }
      },
    },
  },

  mounted() {
    // this.init();
  },

  methods: {
    //根据数据渲染
    init() {
      let ele;
      if (window.ReportHandle) {
        ele = window.cusTomReport(this.info, moment);
        console.log(
          "%c [ ele ]-33",
          "font-size:13px; background:pink; color:#bf2c9f;",
          ele
        );
        this.hascusTom = true;
        const dom = document.querySelector("#report--preview");
        console.log(
          "%c [ dom ]-33",
          "font-size:13px; background:pink; color:#bf2c9f;",
          dom
        );
        dom.innerHTML = ele;
      } else {
        this.hascusTom = false;
      }
    },
    //清空父元素
    clearCusTom() {
      const dom = document.querySelector("#report--preview");
      if (this.hascusTom) {
        dom.innerHTML = "";
      }
    },

    momenthandle(val) {
      return moment(val).format("YYYY-MM-DD HH:mm:ss");
    },
  },
  beforeDestroy() {
    console.log("customReport");
  },
};
</script>

<style scoped>
#report--preview {
  color: #000;
  max-height: 700px;
  overflow: auto;
  box-sizing: border-box;
  padding: 0 10px;
}
.report--header {
  width: 100%;
  height: 115px;
  /* line-height: 80px; */
}

.report--header--item1 {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: end;
}
.report--header--sub {
  color: #000;
}

.report--title1 {
  text-decoration: underline;
  font-weight: bold;
}
.report--pos {
  text-decoration: underline;
  font-size: 18px;
}
.report--title2 {
  font-weight: bold;
}
.report--con {
  text-indent: 25px;
}
.report--img {
  width: 100%;
  /* height: 440px; */
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  margin-bottom: 30px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding-top: 10px;
}
.report--footer {
  display: flex;
  width: 100%;
  height: 80px;
  align-items: center;
  justify-content: end;
  color: #000;
  border-top: 1px solid #000;
  position: relative;
}
.footer--sub {
  color: #000;
}
.footer--sub--tips {
  color: #000;
  position: absolute;
  left: 0px;
  top: 5px;
  font-weight: bold;
}
.preview--img-box {
  width: 386px;
  height: 217px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}
.preview--img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.report--in {
  color: #000;
  margin-right: 50px;
}
.report--doctor {
  color: #000;
}
.sign--box {
  min-width: 100px;
  height: 70%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sign--box img {
  height: 63%;
  object-fit: contain;
}
</style>
